<template v-cloak>
  <view>
    <u-navbar @click="backIndex" back-icon-color="#fff" title-color="#fff" title="极速背题 " :background="background">
    </u-navbar>
    <view class="container" v-if="dataReady">
      <view class="circle"></view>
      <view class="square" @click="continueRecite" v-if="startReciteOr && tag === 1">
        <view>继续背题</view>
        <view>{{questionCompletedCount +'/'+ questionCount}}</view>
      </view>
      <view class="square" @click="startRecite('recite')" v-else>开始背题</view>

    </view>
    <view class="u-loading-item" v-else>
      <u-loading mode="circle" size="100"></u-loading>
      <view class="u-loading-text">
        加载中...
      </view>
    </view>

    <u-modal :mask-close-able="true" v-model="handlePractice" :show-cancel-button="true"
      :title=" '您上次背题进度为' + questionCompletedCount+'/'+questionCount" confirm-text="继续背题" cancel-text="重新开始"
      @cancel="cancelPractice('recite')" @confirm="confirmPractice('recite')">
      <view class="slot-content">
        <view class="container_popup_text">
          是否继续背题
        </view>
      </view>
    </u-modal>

    <u-modal :mask-close-able="true" v-model="handleDelete" :show-cancel-button="true" title="将删除全部刷题记录"
      confirm-text="继续删除" cancel-text="取消" @confirm="confirmDelete('recite')" @cancel="cancelDelete">
      <view class="slot-content">
        <view class="container_popup_text">
          是否继续删除
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script>
  import store from '@/store/modules/user.js';
  import storeExIndex from '@/uni_modules/sv-exam-plus/store/index.js'
  import {
    getExamAPI,
    startRecitePaperAPI,
    deleteRecitePaperAPI,
    resetByIdAPI
  } from '@/api/addPaper/addpaper.js'
  export default {
    data() {
      return {
        handleDelete: false,
        dataReady: false,
        curLib: 'questionItems',
        tag: 0,
        handlePractice: false,
        tagIndex: 0,
        tagType: '竞赛学习',
        background: {
          backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
        },
        startReciteOr: false,
        questionCount: '',
        questionCompletedCount: '',
        progressRecordId: '',
        xxx: null,
        examList: null,
        questionBankType: 8,
        paperType: '',
        personId: '',
      };
    },
    async created() {
      // this.$store.dispatch('getCategoryType')
      // this.examList = await this.getExamList();
      // this.progressRecordId = this.examList.progressRecordId
    },
    onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数

      if (option.paperType === 'person') {
        this.paperType = 'person'
        this.personId = option.id
        this.aiQuestion = false
      } else if (option.paperType === 'public') {

        this.paperType = 'public'
        this.categoryId = option.categoryId
        this.aiQuestion = true
      }
    },
    async onShow() {
      this.questionCompletedCount = storeExIndex.state.examIndex
      this.examList = await this.getExamList();
      this.progressRecordId = this.examList.progressRecordId
    },
    computed: {
      categoryType() {
        return store.state.categoryType
      }
    },
    methods: {
      backIndex() {
        uni.navigateBack()
      },
      continueRecite() {
        this.handlePractice = true
      },
      //确定重新刷题
      async confirmDelete(type) {
        this.questionCompletedCount = 0
        const newSvExam = uni.getStorageSync('sv-exam') || {}
        if (!newSvExam.questionItems) {
          newSvExam.questionItems = {}
        }
        newSvExam.questionItems.reciteIndex = this.questionCompletedCount
        uni.setStorageSync('sv-exam', newSvExam)
        const param = {
          id: this.personId,
          categoryId: this.categoryId,
          questionBankType: this.questionBankType,
          questionIds: ''
        }
        await resetByIdAPI(param).then(async () => {
          this.examList = await this.getExamList();
          uni.navigateTo({
            url: '../../uni_modules/sv-exam-plus/pages/exam/exam',
            success: (res) => {
              res.eventChannel.emit('e-transmit-exams', {
                param: {
                  from_lib: this.curLib,
                  unit: 'unit-1'
                },
                opt: {
                  lib_name: this.curLib,
                  type: type,
                  questionCompletedCount: this.questionCompletedCount,
                  questionBankType: this.questionBankType
                },
                apifunc: {
                  examList: this.xxx
                }
              })
            }
          })
        })

      },
      // 重新刷题
      async cancelPractice(type) {
        this.handleDelete = true
      },
      //继续背题
      confirmPractice(type) {
        const newSvExam = uni.getStorageSync('sv-exam') || {}
        if (!newSvExam.questionItems) {
          newSvExam.questionItems = {}
        }
        newSvExam.questionItems.reciteIndex = this.questionCompletedCount
        uni.setStorageSync('sv-exam', newSvExam)
        uni.navigateTo({
          url: '../../uni_modules/sv-exam-plus/pages/exam/exam',
          success: (res) => {
            res.eventChannel.emit('e-transmit-exams', {
              param: {
                from_lib: this.curLib,
                unit: 'unit-1'
              },
              opt: {
                lib_name: this.curLib,
                type: type,
                questionCompletedCount: this.questionCompletedCount,
                questionBankType: this.questionBankType
              },
              apifunc: {
                examList: this.xxx
              }
            })
          }
        })

      },
      getExamList() {
        return new Promise((resolve, reject) => {
          if (this.paperType === 'public') {
            const param = {
              categoryId: this.categoryId,
              questionBankType: this.questionBankType
            }
            getExamAPI(param).then((res) => {
              resolve(res.data)
              this.xxx = res.data
              this.dataReady = true
              if (res.data.progressRecordId) {
                this.progressRecordId = res.data.progressRecordId
                this.getProsess()
                this.startReciteOr = true
                this.tag = 1
              } else {
                this.startReciteOr = false
                this.tag = 0
              }
            })
          } else if (this.paperType === 'person') {
            const param = {
              id: this.personId,
              questionBankType: this.questionBankType
            }
            getExamAPI(param).then((res) => {
              resolve(res.data)
              this.xxx = res.data
              this.dataReady = true
              if (res.data.progressRecordId) {
                this.progressRecordId = res.data.progressRecordId
                this.getProsess()
                this.startReciteOr = true
                this.tag = 1
              } else {
                this.startReciteOr = false
                this.tag = 0
              }
            })
          }
        })
      },
      //开始背题
      startRecite(type) {
        const newSvExam = uni.getStorageSync('sv-exam') || {}
        if (!newSvExam.questionItems) {
          newSvExam.questionItems = {}
        }
        newSvExam.questionItems.reciteIndex = 0
        uni.setStorageSync('sv-exam', newSvExam)

        uni.navigateTo({
          url: '../../uni_modules/sv-exam-plus/pages/exam/exam',
          success: (res) => {
            res.eventChannel.emit('e-transmit-exams', {
              param: {
                from_lib: this.curLib,
                unit: 'unit-1'
              },
              opt: {
                lib_name: this.curLib,
                type: type,
                progressRecordId: null,
                questionBankType: this.questionBankType
              },
              apifunc: {
                examList: this.xxx
              }
            })
          }
        })

      },
      //获取进度
      async getProsess() {
        const p = {
          id: this.progressRecordId
        }
        await startRecitePaperAPI(p).then((r) => {
          this.questionCompletedCount = r.data.questionCompletedCount
          this.questionCount = r.data.questionCount
        })
      },
      handleTagClick(index, item) {
        this.tagIndex = index;
        this.tagType = item.label
        this.categoryId = item.value
        this.getExamList()

      },
    }
  }
</script>

<style lang="scss">
  .container {
    position: relative;
    width: 450rpx;
    height: 450rpx;
    margin: auto;
    margin-top: 100rpx;
  }


  .u-loading-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin-top: 200rpx;

    .u-loading-text {
      margin-top: 20rpx;
    }
  }



  .circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 添加这行 */
    width: 100%;
    height: 100%;
    background-color: blue;
    border-radius: 50%;
  }

  .square {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 添加这行 */
    width: 400rpx;
    height: 100rpx;
    color: white;
    font-size: 30px;
    text-align: center;
    font-weight: 700;
    // background-color: white;
  }

  .container_header {

    margin-top: 10rpx;
    margin-bottom: 100rpx;
    padding: 20rpx;
    margin: 20rpx;
    background-color: aliceblue;
    border-radius: 20rpx;

    .container_header_tag {
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-evenly;
      align-items: center;
      text-align: center;

      .u-tag {
        width: 140rpx;
        margin: 5px;
        /* 根据需要调整间距 */
      }
    }

  }

  .container_popup_text {
    text-align: center;
    margin: 20rpx 0;
  }
</style>